<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseAvatar src="/img/avatars/1.svg" shape="full" size="xs" dot="success" />

    <BaseAvatar src="/img/avatars/5.svg" shape="full" dot="info" />

    <BaseAvatar src="/img/avatars/4.svg" shape="full" size="md" dot="warning" />

    <BaseAvatar src="/img/avatars/3.svg" shape="full" size="lg" dot="pink" />

    <BaseAvatar src="/img/avatars/8.svg" shape="full" size="xl" dot="danger" />

    <BaseAvatar src="/img/avatars/16.svg" shape="full" size="2xl" dot="yellow" />

    <BaseAvatar src="/img/avatars/2.svg" shape="full" size="3xl" dot="info" />

    <BaseAvatar src="/img/avatars/20.svg" shape="full" size="4xl" dot="success" />
  </div>
</template>
